<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<el-form slot="query" ref="form" :inline="true">
			<!-- 申请人账号 -->
			<el-form-item :label="$t('dxn.card_ables_list.apply_name')">
				<el-input
					v-input="{ name: 'symbols' }"
					clearable
					v-model="form.applyName"
					maxlength="11"
					:placeholder="$t('common.please_enter')"
				/>
			</el-form-item>
			<!-- <el-form-item label="申请人名称">
				<el-input clearable v-model="form.proxyName" placeholder="请输入" />
			</el-form-item> -->
			<!-- 所属总代账号 -->
			<el-form-item :label="$t('dxn.card_ables_list.belong_total_agent')">
				<el-input
					v-input="{ name: 'symbols' }"
					clearable
					v-model="form.topProxyName"
					maxlength="11"
					:placeholder="$t('common.please_enter')"
				/>
			</el-form-item>
			<!-- 申请时间 -->
			<el-form-item :label="$t('dxn.card_ables_list.apply_time')">
				<el-date-picker
					v-model="form.applyDate"
					size="medium"
					:picker-options="pickerShortcut2"
					format="yyyy-MM-dd HH:mm:ss"
					type="datetimerange"
					range-separator="-"
					:start-placeholder="$t('common.start_date')"
					:end-placeholder="$t('common.end_date')"
					align="right"
					clearable
					value-format="timestamp"
					style="width: 430px"
					:default-time="defaultTime"
				></el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button
					type="primary"
					icon="el-icon-search"
					:disabled="loading"
					:loading="loading"
					size="medium"
					@click="search"
				>
					{{ $t('common.search') }}
				</el-button>
				<el-button
					icon="el-icon-refresh-left"
					:disabled="loading"
					size="medium"
					@click="reset"
				>
					{{ $t('common.reset') }}
				</el-button>
			</el-form-item>
		</el-form>
		<template slot="content">
			<el-table
				v-loading="loading"
				element-loading-spinner="el-icon-loading"
				:data="list"
				border
				size="mini"
				style="width: 100%"
				:max-height="tableHeight"
				highlight-current-row
			>
				<el-table-column
					type="index"
					:label="`${$t('dxn.game_rule.serial_number')}`"
					width="60"
					align="center"
				/>
				<!-- 申请时间 -->
				<el-table-column
					:label="$t('dxn.card_ables_list.apply_time')"
					min-width="170"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.createdAt || '-' }}
					</template>
				</el-table-column>
				<!-- 申请人账号 -->
				<el-table-column
					:label="$t('dxn.card_ables_list.apply_name')"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.proxyName || '-' }}
					</template>
				</el-table-column>
				<!-- 所属总代账号 -->
				<el-table-column
					:label="$t('dxn.card_ables_list.belong_total_agent')"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.topProxyName || '-' }}
					</template>
				</el-table-column>
				<!-- 俱乐部名称 -->
				<el-table-column
					:label="$t('dxn.card_ables_list.club_name')"
					min-width="150"
					align="center"
					show-overflow-tooltip
				>
					<template slot-scope="scope">
						{{ scope.row.clubName || '-' }}
					</template>
				</el-table-column>
				<!-- 俱乐部头像 -->
				<el-table-column
					prop="iconUrl"
					align="center"
					:label="$t('dxn.card_ables_list.club_header')"
					width="150"
				>
					<template slot-scope="scope">
						<el-avatar
							:src="scope.row.iconUrl"
							class="show-avatar"
							fit="fill"
						/>
					</template>
				</el-table-column>
				<!-- 俱乐部介绍 -->
				<el-table-column
					prop="introduction"
					align="center"
					:label="$t('dxn.card_ables_list.club_desc')"
					minWidth="150"
				>
					<template slot-scope="scope">
						<!-- {{ scope.row.introduction || '-' }} -->
						<el-tooltip
							v-if="
								scope.row.introduction &&
									scope.row.introduction.length > 12
							"
							class="item"
							effect="dark"
							placement="top"
						>
							<div class="tooltip-content" slot="content">
								{{ scope.row.introduction || '-' }}
							</div>
							<div class="tooltip-trigger">
								{{ scope.row.introduction }}
							</div>
						</el-tooltip>
						<span v-else>
							{{ scope.row.introduction || '-' }}
						</span>
					</template>
				</el-table-column>
				<el-table-column
					prop="userName"
					align="center"
					label="操作"
					width="200"
					fixed="right"
				>
					<template slot-scope="scope">
						<span v-if="hasPermission('90150033')">
							<el-button
								@click="showApplyDetail(scope.row, 1)"
								type="primary"
								size="small"
							>
								审核通过
							</el-button>
							<el-button
								@click="showApplyDetail(scope.row, 2)"
								type="danger"
								size="small"
							>
								审核拒绝
							</el-button>
						</span>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				v-if="!!total"
				class="pageValue"
				:current-page.sync="pageNum"
				background
				layout="total, sizes,prev, pager, next, jumper"
				:page-size="pageSize"
				:page-sizes="pageSizes"
				:total="total"
				:pager-count="9"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
			/>
		</template>
		<ClubDetail
			:dialogVisible.sync="showDetail.dialogVisible"
			:dialogLoading="showDetail.dialogLoading"
			:auditStatus="showDetail.auditStatus"
			:clubDetail="showDetail.clubDetail"
			@loadData="loadData"
		/>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import ClubDetail from './components/ClubDetail'
import MainContent from '@/components/MainContent/index.vue'

const initDate = () => [
	dayjs()
		.startOf('day')
		.subtract(7, 'day')
		.valueOf(),

	dayjs()
		.endOf('day')
		.valueOf()
]

export default {
	name: routerNames.clubApplicationList,
	components: {
		MainContent,
		ClubDetail
	},
	mixins: [list],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			form: {
				applyName: '',
				proxyName: '',
				topProxyName: '',
				applyDate: initDate()
			},
			showDetail: {
				dialogVisible: false,
				dialogLoading: false,
				clubDetail: {},
				auditStatus: 1
			}
		}
	},
	methods: {
		reset() {
			Object.keys(this.form).forEach((key) => {
				this.form[key] = ''
			})
			this.form.applyDate = initDate()
			this.initList()
		},
		// 俱乐部审核auditStatus: (1通过 2拒绝)
		showApplyDetail(clubDetail, auditStatus) {
			this.showDetail = {
				dialogVisible: true,
				dialogLoading: false,
				clubDetail: clubDetail,
				auditStatus: auditStatus
			}
		},
		// applyClub(auditStatus, remark) {
		// 	// 锁单+审核
		// 	const auditClubParam = {
		// 		id: this.showDetail.clubDetail.id,
		// 		auditStatus: auditStatus === 1 ? 1 : 2, // 审核状态
		// 		remark: remark
		// 	}
		// 	this.$api
		// 		.clubManageLockAndAudit(auditClubParam)
		// 		.then((res) => {
		// 			if (res?.code === 200) {
		// 				// 重新渲染数据
		// 				this.loadData()
		// 			}
		// 		})
		// 		.catch(() => {})
		// },
		// applyClub(clubDetail, auditStatus) {
		// 	this.$confirm(
		// 		`<strong>是否${
		// 			auditStatus === 1
		// 				? `通过
		// 				【${clubDetail.applyName}】申请的
		// 				【${clubDetail.clubName}】俱乐部？`
		// 				: '要“拒绝通过”该俱乐部'
		// 		}</strong></br><span style='font-size:12px;color:#c1c1c1'>谨慎操作</span>`,
		// 		this.$t('common.success_tip'),
		// 		{
		// 			dangerouslyUseHTMLString: true,
		// 			confirmButtonText: this.$t('common.confirm'),
		// 			cancelButtonText: this.$t('common.cancel'),
		// 			type: 'warning',
		// 			customClass: 'positionIcon'
		// 		}
		// 	).then(() => {
		// 		// 锁单+审核
		// 		const auditClubParam = {
		// 			id: clubDetail.id,
		// 			auditStatus: auditStatus === 1 ? 1 : 2, // 审核状态
		// 			remark: ''
		// 		}
		// 		this.$api
		// 			.clubManageLockAndAudit(auditClubParam)
		// 			.then((res) => {
		// 				if (res?.code === 200) {
		// 					// 重新渲染数据
		// 					this.loadData()
		// 				}
		// 			})
		// 			.catch(() => {})
		// 	})
		// },
		// 与后端沟通，锁单加审核合并为一个接口，后续有锁单操作再分两个接口
		// lockThenAudit(clubDetail, auditStatus) {
		// 	// 锁单
		// 	const lockClubParam = {
		// 		id: clubDetail.id,
		// 		lockStatus: 1
		// 	}
		// 	this.$api
		// 		.clubManageClubAuditLock(lockClubParam)
		// 		.then(() => {
		// 			// 审核
		// 			const auditClubParam = {
		// 				id: clubDetail.id,
		// 				auditStatus: auditStatus === 1 ? 1 : 2,
		// 				remark: ''
		// 			}
		// 			this.$api
		// 				.clubManageAudit(auditClubParam)
		// 				.then((res) => {
		// 					if (res?.code === 200) {
		// 						// 重新渲染数据
		// 						this.loadData()
		// 					}
		// 				})
		// 				.catch(() => {})
		// 		})
		// 		.catch(() => {})
		// },
		// applyConfirm(bool) {
		// 	return this.$confirm(
		// 		`<strong>是否要 “${
		// 			bool ? '审核通过' : '审核拒绝'
		// 		}”</strong></br><span style='font-size:12px;color:#c1c1c1'>谨慎操作</span>`,
		// 		this.$t('common.success_tip'),
		// 		{
		// 			dangerouslyUseHTMLString: true,
		// 			confirmButtonText: this.$t('common.confirm'),
		// 			cancelButtonText: this.$t('common.cancel'),
		// 			type: 'warning'
		// 		}
		// 	)
		// },
		// 锁单
		// fetchLock(id) {
		// 	return this.$api.clubManageClubAuditLock({
		// 		id,
		// 		lockStatus: 1
		// 	})
		// },

		// handleLockChange() {},
		// 审批操作
		// async handleApply(row, bool) {
		// 	const parmas = {
		// 		id: row.id,
		// 		auditStatus: bool ? 1 : 2,
		// 		remark: ''
		// 	}
		// 	try {
		// 		await this.applyConfirm(bool)
		// 		await this.fetchLock(row.id)
		// 		const res = this.$api.clubManageAudit(parmas)
		// 		if (res.code === 200) {
		// 			this.loadData()
		// 		}
		// 	} catch (err) {
		// 		throw err
		// 		// throw err
		// 	}
		// },
		formatDate(dateTime) {
			if (dateTime) {
				return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss')
			}
			return undefined
		},
		formatParams() {
			const [startTimeNum, endTimeNum] = this.form.applyDate || []
			const queryCondition = Object.assign({}, this.form, {
				applyTimeStart: this.formatDate(startTimeNum),
				applyTimeEnd: this.formatDate(endTimeNum),
				createdAt: undefined
			})
			Object.keys(queryCondition).forEach((k) => {
				if (queryCondition[k] === '') {
					queryCondition[k] = undefined
				}
			})

			return {
				...this.pageParams,
				...queryCondition,
				auditStatus: 0 // 只查询待审核状态下的数据
			}
		},
		// 查询待审核的俱乐部
		async loadData() {
			this.loading = true
			const params = this.formatParams()
			await this.$api
				.clubManageClubAuditList(params)
				.then((res) => {
					if (res?.code === 200 && res?.data) {
						const { pageNum, pageSize, record = [], totalRecord } =
							res.data || {}

						this.pageNum = pageNum
						this.pageSize = pageSize
						this.list = record
						this.total = totalRecord || 0
					}
				})
				.catch(() => {})
				.finally(() => {
					this.loading = false
				})
		}
	}
}
</script>
<style lang="scss" scoped>
::v-deep .show-avatar {
	img {
		width: 100%;
		height: 100%;
	}
}
.tooltip-content {
	width: 250px;
}
.tooltip-trigger {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
</style>
